<template>
  <div class="text-xs text-white">
    <div
      class="grid grid-cols-1 gap-y-3 pb-3 lg:overflow-y-auto lg:max-h-[1200px] hide-scrollbar"
      v-if="recommendGoodsList.length">
      <NuxtLink
        external
        class="flex items-center"
        :to="$localePath(`/goods/${item.urlName || item.id}`)"
        v-for="item in recommendGoodsList"
        :key="item.id">
        <y-image
          class="h-16 w-16 shrink-0 ltr:mr-3 rounded-md rtl:ml-3"
          :src="$withPicOrigin(item.smallIcon)"
          height="65"
          width="65" />
        <div>
          <h3 class="mb-1 text-base line-clamp-2 leading-5">{{ item.name }}</h3>
          <span class="text-[rgba(255,255,255,0.6)] text-xs lg:text-base">{{ item.areaCode }}</span>
        </div>
      </NuxtLink>
    </div>
    <van-empty v-else image="/v2/home-imgs/empty2.png" description="nothing here" />
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useGoodsStore } from '~/store/goods'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'

const goodsStore = useGoodsStore()
const { recommendGoodsList } = storeToRefs(goodsStore)
</script>

<style lang="scss"></style>
